<template>
  <div class="z-repeat">
    <el-form ref="form" label-width="140px">
      <el-form-item label="请输入用户列表">
        <el-input
          v-model="textarea"
          maxlength="180"
          placeholder="请输入用户数据，用，分割"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">检查重复</el-button>
      </el-form-item>
    </el-form>
    <div class="z-repeat-text" v-if="repeatData.length > 0">
      <span>长度：{{ len }}</span>
      <span>去重后长度：{{ repeatLen }}</span>
    </div>
    <div class="z-repeat-wrap" v-if="repeatData.length > 0">
      <span v-for="(item, idx) in data" :key="idx">
        <span
          :style="{ background: item.color, color: item.color ? '#fff' : '' }"
          >{{ item.name }}</span
        >{{ data.length - idx - 1 > 0 ? "，" : "" }}</span
      >
    </div>
    <div v-else class="z-repeat-wrap">无重复，合计{{ len }}</div>
    <ul class="z-repeat-content">
      <li v-for="item in repeatData" :key="item.content">
        <span>重复内容:{{ item.content }}</span>
        <span>重复次数:{{ item.num }}</span>
        <span>重复位置:{{ item.index }}</span>
        <span>颜色标注:<span :style="{ background: item.color }"></span></span>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { getRepeat } from "utils/common";
import { ref, reactive } from "vue";
let textarea = ref(
  "小李，小王，小李，小张，小徐，小李，小华，小王，小文，小强，小丽，小文"
);
let repeatData = reactive([]);
let data = reactive([]);
let len = ref(0);
let repeatLen = ref(0);
function onSubmit() {
  let res = getRepeat(textarea.value);
  repeatData.length = 0;
  data.length = 0;
  console.log(res);
  if (res.isRepate) {
    res.repeat.forEach((item) => {
      repeatData.push(item);
    });
    res.data.forEach((item) => {
      data.push(item);
    });
    repeatLen.value = res.repeatLen;
  }
  len.value = res.len;
}
</script>
<style lang="scss">
.z-repeat {
  width: 1000px;
  margin: 0 auto 50px;
  .z-repeat-text {
    width: 500px;
    margin: 0 auto 50px;
    span {
      margin-right: 20px;
    }
  }
  .z-repeat-wrap {
    width: 500px;
    margin: 0 auto 50px;
    line-height: 25px;
    span {
      // margin: 0 10px;
    }
  }
  .z-repeat-content {
    width: 500px;
    margin: 0 auto;
    li {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      line-height: 25px;
      > span > span {
        width: 30px;
        height: 15px;
        display: inline-block;
        margin-left: 10px;
      }
    }
  }
}
</style>